<template>
	<view class="company-container">
		<view class="base-info space" @click="toPage('base-info')">
			<view class="content">
				<view class="name">{{ company.fullName }}</view>
				<view class="">
					<text class="nature">{{ company.nature || '暂无数据' }}</text>
					<text class="scale">{{ company.scale || '暂无数据' }}</text>
				</view>
			</view>
			<image :src="company.logo" mode=""></image>
		</view>
		<!-- 福利 -->
		<view class="welfare space" @click="toPage('welfare')">
			<view class="header">
				<view class="label">公司福利</view>
				<uv-icon name="edit-pen" size="24"></uv-icon>
			</view>
			<view class="content" v-if="company.welfare && company.welfare.length">
				<view class="tags">
					<text v-for="(item, index) in company.welfare" :key="index">{{ item.name }}</text>
				</view>
			</view>
			<view class="placeholder" v-else>美好的福利让求职者更加心仪</view>
		</view>
		<!-- 工作时间 -->
		<view class="work-time space" @click="toPage('work-time')">
			<view class="header">
				<view class="label">工作时间</view>
				<uv-icon name="edit-pen" size="24"></uv-icon>
			</view>
			<view class="content" v-if="company.workTime">
				<view class="time">{{ company.workTime.split('-')[0] }} 至 {{ company.workTime.split('-')[1] }}</view>
				<view class="weekend">
					<text>{{ company.weekend }}</text>
					<text class="line"></text>
					<text>{{ company.workOvertime }}</text>
				</view>
			</view>
			<view class="placeholder" v-else>清晰的工作时间可以解决很多问题</view>
		</view>
		<!-- 地址 -->
		<view class="address space ban">
			<view class="header"><view class="label">公司位置</view></view>
			<view class="content" @click="handleSelectAddress">
				<uv-input
					disabled
					v-model="company.address"
					border="bottom"
					suffixIcon="arrow-right"
					placeholder="请选择工作地点"
					customStyle="height: 100rpx;padding: 6px 0 6px 0;"
				></uv-input>
			</view>
		</view>
		<!-- 介绍 -->
		<view class="introduce space ban">
			<view class="header"><view class="label">公司介绍</view></view>
			<view class="content" @click="toPage('introduce')">
				<uv-input
					disabled
					v-model="company.introduce"
					border="bottom"
					suffixIcon="arrow-right"
					placeholder="简单介绍公司，突出核心优势"
					customStyle="height: 100rpx;padding: 6px 0 6px 0;"
				></uv-input>
			</view>
		</view>
		<!-- 图片 -->
		<view class="photp space ban">
			<view class="header"><view class="label">公司相册</view></view>
			<view class="content">
				<uv-upload
					:fileList="fileList"
					multiple
					previewFullImage
					maxSize="5242880"
					:maxCount="9"
					@afterRead="handleAfterRead"
					@oversize="handleOversize"
					@delete="handleDelete"
				></uv-upload>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import {
	getCompanyDetail,
	uploadCompanyPhotos,
	removeCompanyPhoto,
	updateCompanyAddress,
	updateCompanyIntroduce
} from '@/apis/company/index.js';
import { getCredential, removeCosFile } from '@/apis/cos.js';
import { uploadFile } from '@/utils/index.js';

export default {
	data() {
		return {
			fileList: [], // 文件列表
			address: '', // 地址
			company: {} // 公司信息
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onShow() {
		this.initData();
	},
	mounted() {
		// 监听公司介绍页返回的数据
		uni.$on('describe:value', value => {
			this.company.introduce = value.content;
			updateCompanyIntroduce(this.userInfo.companyId, { introduce: value.content });
		});
	},
	onUnload() {
		// 移除监听事件
		uni.$off('describe:value');
		uni.removeStorageSync('company');
	},
	methods: {
		// 初始化数据
		async initData() {
			const info = await getCompanyDetail(this.userInfo.companyId);
			if (info.code === 200) {
				this.company = info.data;
				this.fileList = info.data.photos || [];
			}
			if (this.address) {
				this.company.address = this.address;
			}
		},
		// 保存上传的图片
		async handleAfterRead(e) {
			for (const file of e.file) {
				const suffix = file.url.substr(file.url.lastIndexOf('.') + 1);
				const credential = await getCredential(suffix, 'company');
				const url = await uploadFile(credential.data, file.url);
				const photo = await uploadCompanyPhotos({ company_id: this.company.id, url });
				this.fileList.push(photo.data);
			}
			uni.showToast({ icon: 'success', title: '保存成功' });
		},
		// 删除图片
		async handleDelete(e) {
			const res = await removeCosFile(e.file.url, 'company');
			if (res.code === 200) {
				this.fileList.splice(e.index, 1);
				removeCompanyPhoto(e.file.id);
			}
			uni.showToast({ icon: 'success', title: '保存成功' });
		},
		// 错误提示
		handleOversize() {
			uni.showToast({ icon: 'none', title: '单张图片大小不能超过5M' });
		},
		// 选择公司地址
		handleSelectAddress() {
			uni.chooseLocation({
				success: res => {
					updateCompanyAddress(this.userInfo.companyId, { address: res.address });
					this.address = res.address;
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		// 页面跳转
		toPage(url) {
			if (url === 'introduce') {
				const info = {
					title: '公司介绍',
					desc: '简单介绍公司信息，突出核心优势',
					value: this.company.introduce
				};
				uni.navigateTo({
					url: '/pages/common/describe?info=' + encodeURIComponent(JSON.stringify(info))
				});
			} else {
				uni.setStorageSync('company', this.company);
				uni.navigateTo({ url: `/pages/company/components/${url}` });
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.company-container ::v-deep .uv-input__content__prefix-icon {
	margin-right: 0 !important;
}

.company-container ::v-deep .uv-input__content__field-wrapper__field {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>

<style lang="scss" scoped>
.company-container {
	padding: 30rpx;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.label {
			font-size: 32rpx;
		}
	}
	.space {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #e2e2e2;
	}
	.space.ban {
		border-bottom: none;
		padding-bottom: 0;
	}
	.placeholder {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #909399;
	}
	.base-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.name {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		text {
			margin-right: 10rpx;
		}
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}
	}
	.welfare .tags {
		width: 100%;
		margin-top: 20rpx;
		text {
			display: inline-block;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			padding: 8rpx 20rpx;
			font-size: 32rpx;
			color: #666;
			border-radius: 8rpx;
			background-color: #e4e7ed;
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.work-time {
		.time {
			font-size: 32rpx;
			margin: 18rpx 0 10rpx;
		}
		.weekend {
			color: #767a82;
		}
		.line {
			display: inline-block;
			width: 2rpx;
			height: 20rpx;
			margin: 0 16rpx;
			background-color: #ccc;
		}
	}
	.photp .content {
		margin-top: 30rpx;
	}
}
</style>
